<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img class="bigImg" src="./img//images/img3.jpeg" alt="">
    <img class="logo" src="./img/images/0942ae9abd6ec94a27114bb06545324.png" alt="">
    <div class="circle1">+
        <div class="circle2"></div>
        <div class="circle2 circle3"></div>
        <div class="circle2 circle4"></div>
    </div>
    <div class="rightBox">
        <div class="top">
            <img class="topOneImg" src="./img/images/76c4a200d0c7cddc43f6f47589fb5ae.png" alt="">
            <img class="topTwoImg" src="./img/images/cdfae4ad56779100621de1f22a18ac3.png" alt="">
            <img class="topThreeImg" src="./img/images/4bf0b71df976c74e2fc3d46982b0556.png" alt="">
        </div>
        <img class="centerImg" src="./img/images/191d6c0111155c6d10ac26f5ccf2b08.png" alt="">
    </div>
</body>
</html>
<script>
    var circle1=document.querySelector('.circle1')
    var logo=document.querySelector('.logo')
    var rightBox=document.querySelector('.rightBox')
    var circle1=document.querySelector('.circle1')
    var topOneImg=document.querySelector('.topOneImg')
    var topTwoImg=document.querySelector('.topTwoImg')
    var topThreeImg=document.querySelector('.topThreeImg')
    circle1.onclick=function(){
        logo.style.left=100+'px'
        rightBox.style.opacity=1
        circle1.style.display='none'
    }
    rightBox.onmouseover=function(){
        var count=2
        var time=setInterval(() => {
            if(count==0){
                topOneImg.style.display='none'
                topTwoImg.style.display='inline-block'
                topThreeImg.style.display='none'
                // clearInterval(time)
                count=2
            }else if(count==1){
                count--
                topOneImg.style.display='inline-block'
                topTwoImg.style.display='none'
                topThreeImg.style.display='none'
            }else if(count==2){
                count--
                topOneImg.style.display='none'
                topTwoImg.style.display='none'
                topThreeImg.style.display='inline-block'
            }
            console.log(count);
        },1000);
    }
</script>
<style>
    *{
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
    }
    .bigImg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .circle1{
		width: 10px;
		height: 10px;
		background-color: white;
		border-radius: 50%;
		position: absolute;
		right: 544px;
		top: 496px;
        display: flex;
        justify-content: center;
        align-items: center;
	}
			.circle2{
				width: 12px;
				height: 12px;
				box-shadow: 0 0 6px white;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				animation: startMove 0.7s linear infinite;
			}
			@keyframes startMove{
				0%{
					
				}
				60%{
					width: 20px;
					height: 20px;
					opacity: 1;
				}
				100%{
					width: 40px;
					height: 40px;
					opacity: 0;
				}
			}
			.circle3{
				animation-delay: 0.4s;
			}
			.circle4{
				animation-delay: 0.4s;
			}
            .logo{
                width: 410px;
                position: absolute;
                top: 269px;
                left: 454px;
                transition: all .8s;
            }
            .rightBox{
                width: 400px;
                height: 160px;
                background-color: white;
                position: absolute;
                top: 110px;
                left: 800px;
                background-color: transparent;
                opacity: 0;
                transition: all 1s;
            }
            .centerImg{
                width: 100%;
            }
            .One{
                display: inline-block;
            }
            .topTwoImg{
                display: none;
            }
            .topThreeImg{
                display: none;
            }
</style>